<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img src="../../../public/vite.svg" />
          <div class="userinfo">
            <p class="userinfo-name">Admin</p>
            <p class="userinfo-xx">超级管理员</p>
          </div>
        </div>
        <div class="logininfo">
          <p>
            上次登陆时间:<span>{{ year }}-{{ month + 1 }}-{{ day }}</span>
          </p>
          <p>上次登陆地点:<span>xxx</span></p>
        </div>
      </el-card>

      <el-card shadow="hover" style="margin-top: 20px">
        <el-table :data="tableData" style="width: 100%; height: 360px">
          <el-table-column prop="name" label="手机型号" width="100" />
          <el-table-column prop="todayBuy" label="本日销售量" width="100" />
          <el-table-column prop="monthBuy" label="本月销售量" width="100" />
          <el-table-column prop="totalBuy" label="总销售量" />
        </el-table>
      </el-card>
    </el-col>
    <el-col
      style="display: flex; flex-wrap: wrap; height: 200px; padding: 0"
      :span="16"
      class="elcol"
    >
      <div class="card-icon">
        <el-card
          class="card"
          v-for="item in countData"
          :key="item.name"
          shadow="hover"
          ><component :is="item.icon"></component>
          <div>
            <div>{{ item.name }}</div>
            <div>￥{{ item.value }}</div>
          </div>
        </el-card>
      </div>

      <el-card style="height: 430px" shadow="hover">
        <div id="customerChart" style="height: 430px; width: 815px"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
// import * as echarts from "echarts";
import { inject, onMounted, ref } from "vue";
import axios from "axios";

export default {
  beforeRouteEnter() {
    console.log("进入该组件时调用");
  },
  beforeRouteUpdate() {
    console.log("该组件更新时调用");
  },
  beforeRouteLeave() {
    console.log("离开该组件时调用");
  },
  setup() {
    let echarts = inject("ec");
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("customerChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "商品价格" },
        tooltip: {},
        xAxis: {
          data: [
            "20191001",
            "20191002",
            "20191003",
            "20191004",
            "20191005",
            "20191006",
            "20191007",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [
              {
                name: "小米",
                value: 2999,
              },
              {
                name: "苹果",
                value: 5999,
              },
              {
                name: "vivo",
                value: 1500,
              },
              {
                name: "oppo",
                value: 1999,
              },
              {
                name: "魅族",
                value: 2200,
              },
              {
                name: "三星",
                value: 4500,
              },
            ],
            label: {
              show: true,
            },
          },
        ],
      });
      // window.onresize = function () {
      //   //自适应大小
      //   myChart.resize();
      // };
    });
    const tableData = ref([]);
    const countData = ref([]);
    const time = new Date();
    const year = time.getFullYear();
    const month = time.getMonth();
    const day = time.getDate();

    const getTableList = async () => {
      await axios.get("/home/getData").then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          tableData.value = res.data.data.tableData;
          countData.value = res.data.data.countData;
        }
      });
    };
    onMounted(() => {
      getTableList();
    });

    return {
      year,
      month,
      day,
      tableData,
      getTableList,
      countData,
    };
  },
};
</script>

<style>
.user {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.user img {
  width: 70px;
  height: 70px;
  background-color: blue;
  border-radius: 50%;
}
.userinfo {
  margin-left: 30px;
}
.userinfo-name {
  font-weight: 700;
  font-size: 28px;
  margin: 0;
}
.userinfo-xx {
  color: #ccc;
  font-size: 14px;
}
.logininfo {
  font-size: 14px;
  color: #ccc;
}
.logininfo span {
  color: #000;
  margin-left: 15px;
}
.card-icon {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card {
  width: 32%;
  margin-bottom: 15px;
}
</style>